import { View, Text,TouchableOpacity } from 'react-native'
import React, { useEffect ,useState} from 'react'
import axios from 'axios';
import { router } from 'expo-router';
import AntDesign from '@expo/vector-icons/AntDesign';
import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
export default function show() {
  const [id,setId] = useState('677f8a026b8f7fa143a658de')
    const [show,setShow] = useState([])
    console.log(show);
    
    const showIDcard = async () => {
        const {data:{data}} = await axios.get(`http://192.168.1.18:3000/showid?cid=${id}`)
        console.log(data);
        
        setShow(data[0])
    }
    useEffect(()=>{
        showIDcard()
    },[])

    const maskName=(name:string)=>{
      if (!name || name.length <= 1) {
        return name; // 如果名字为空或只有一个字符，则直接返回原名
      }
      const lasetChar=name?.slice(-1)
    const maskedPart='*'.repeat(name?.length-1)
    return `${maskedPart}${lasetChar}`
    }
  return (
    <View style={styles.container}>
 <TouchableOpacity style={styles.item}>
            < ThemedText style={styles.title}  > 认证信息 </ ThemedText>
            < ThemedView style={styles.right}>
              < ThemedText>{maskName(show.name)}</ ThemedText>
              <AntDesign name="right" size={24} color="gray" />
            </ThemedView>
            
          </TouchableOpacity>
          <TouchableOpacity style={styles.item}>
            < ThemedText   > 认证状态 </ ThemedText>
            < ThemedView style={styles.right}>
              < ThemedText> 已认证</ ThemedText>
              <AntDesign name="right" size={24} color="gray" />
            </ThemedView>
            
          </TouchableOpacity>
    </View>
  )
}

const styles = {
  container:{
    backgroundColor:'white'
  },
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
      },
      
      right:{
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'transparent',
      }
}